<template>
  <div id="qinfo-list">
    <template v-if="detailShowing === false && filterShowing == false">
      <div class="col-12 bg-info text-center text-white fa-2">
        Q 列表
        <span @click="showFilter()" class="float-end me-1">
          <i class="fa fa-filter" aria-hidden="true"></i>
        </span>
      </div>

      <div class="card col-12 px-0">
        <table class="table table-striped table-sm small">
          <thead>
            <tr>
              <th>类型</th>
              <th>用户名</th>
              <th>记录编号</th>
              <th class="hidden-xs-down">联系电话</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="flight in qinfoes"
              :key="flight.id"
              @click.stop="showPnrDetail(flight.qdetail)"
            >
              <td>
                {{ flight.qtype }}
              </td>
              <td>{{ flight.username }}</td>
              <td>
                {{ flight.pnrno }}
              </td>
              <td class="hidden-xs-down">
                {{ flight.linkphone }}
              </td>
              <td>
                <i class="fas fa-angle-right fa-2"></i>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="card-body">
          <my-pagination
            :row-count="sc.rowCount"
            :page-total="sc.pageTotal"
            :page-no="sc.pageNo"
            @next-page="nextPage"
            @prev-page="prevPage"
            @direct-page="directPage"
          ></my-pagination>
        </div>
      </div>
    </template>

    <template v-if="detailShowing">
      <div class="col-12 bg-info text-center text-white">
        <span @click="hideDetail()" class="float-start"
          ><i class="fa fa-angle-left fa-2" aria-hidden="true"></i
        ></span>
        编码详情
      </div>
      <div class="card col-12" v-if="pnrDetail != null">
        <div v-html="'<pre>' + pnrDetail + '</pre>'"></div>
      </div>
    </template>

    <template v-if="filterShowing">
      <div class="col-12 text-end mt-3 me-5">
        <button
          type="button"
          class="btn btn-sm btn-info"
          @click.stop="resetFilter()"
        >
          重置
        </button>
        <button
          type="button"
          class="btn btn-sm btn-success"
          @click.stop="hideFilter()"
        >
          确定
        </button>
      </div>

      <div class="card col-12 mt-2 card-outline-primary">
        <div class="card-block">
          <div class="card-title">查询条件</div>
          <div class="col-1">
            <input
              class="form-control"
              type="text"
              placeholder="请输入编码"
              v-model="pnrNo"
            />
          </div>
          <div class="col-1">
            <input
              class="form-control"
              type="text"
              placeholder="请输入用户名"
              v-model="username"
            />
          </div>
          <div class="col-1">
            <select class="form-select" v-model="qtype">
              <option value="">全部</option>
              <option value="SC">SC</option>
              <option value="KK">KK</option>
            </select>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import MyPagination from "@/components/my-pagination_h5.vue";

import $ from "jquery";

export default {
  name: "QinfoList",
  components: {
    MyPagination,
  },
  data() {
    return {
      detailShowing: false,
      filterShowing: false,
      pnrDetail: "",

      qinfoes: [],
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },
      pnrNo: "",
      username: "",
      qtype: "",
    };
  },
  mounted: function () {
    this.$store.commit("setWorkMode", "h5");
    this.search();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      var self = this;
      self.showLoading();

      $.ajax({
        type: "post",
        url: "/Flight/qinfoes/",
        data: {
          "sc.pageNo": self.sc.pageNo,
          "sc.pageSize": self.sc.pageSize,
          "sc.pnrNo": self.pnrNo,
          "sc.username": self.username,
          "sc.qtype": self.qtype,
        },
        dataType: "json",
        success: function (jsonResult) {
          self.qinfoes = jsonResult.dataList;
          self.sc = jsonResult.page;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          self.searching = false;

          if (XMLHttpRequest.status === 403) {
            self.$store.commit("jumpToLogin", self.$router);
          }
        },
        complete: function (XMLHttpRequest, textStatus) {
          self.hideLoading();
        },
      });
    },
    showPnrDetail: function (qdetail) {
      this.detailShowing = true;
      this.pnrDetail = qdetail;
    },
    hideDetail: function () {
      this.detailShowing = false;
    },
    showFilter: function () {
      this.filterShowing = true;
    },
    hideFilter: function () {
      this.filterShowing = false;
      this.search();
    },
    resetFilter: function () {
      this.pnrNo = "";
      this.username = "";
      this.qtype = "";
    },
    reInform: function (index) {
      var id = this.qinfoes[index].id;
      var self = this;

      $.ajax({
        type: "post",
        url: "/Flight/qinfoes/reInformQinfo.do",
        data: { id: id },
        dataType: "json",
        success: function (jsonResult) {
          if (jsonResult.status === "OK") {
            self.search();
          } else {
            self.showErrMsg("操作失败");
          }
        },
      });
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
